<template>
    <page>
        <m-header3 title="请确认您取货的门店"></m-header3>
        <!--<p>当前坐标: {{ coords.longitude }}, {{coords.latitude}}</p>-->
        <!--<p v-if="list_.length">最近坐标: {{ list_[0].longitude }}, {{list_[0].latitude }}</p>-->
        <ul>
            <template v-for="(i, index) in list">
                <li v-if="index == 0">
                    <div class="white-bg px12 py12 bdt bdb">
                        <p class="tr line32 c1 f16">距离{{i.dist | meter2kilometre}}</p>
                        <section flex="box:first cross:center" class="mb15">
                            <m-img :src="i.image" class="my-img" ratio="1"></m-img>
                            <span class="ml10">
                                    <p class="f22">{{i.shopName}}</p>
                                    <p class="mt12 text2">{{i.address}}</p>
                                </span>
                        </section>
                        <router-link
                                :to="{ name: 'store_productList', query: { id: i.id }, params: i}">
                            <m-button class="mt20">确认门店</m-button>
                        </router-link>
                    </div>
                    <m-header3 title="附近门店"></m-header3>
                </li>
                <router-link :to="{ name: 'store_productList', query: { id: i.id }, params: i}"
                             tag="li" class="p12 tap white-bg"
                             flex="box:justify cross:center" v-if="index !== 0">
                    <m-img :src="i.image" class="small-img" ratio="1"></m-img>
                    <div class="mx12">
                        <p class="f18">{{i.shopName}}</p>
                        <p class="mt10 text2 f14">{{i.address}}</p>
                    </div>
                    <p class="f14 text2" flex="cross:center">距离&nbsp;{{i.dist | meter2kilometre}}&nbsp;<i
                            class="iconfont icon-daohang fxxxl c1"></i></p>
                </router-link>
            </template>
        </ul>
    </page>
</template>
<script>
  import { get_nearly, meter2kilometre } from '@/utils/经纬度计算'
  import { getLocation } from '@/common/jssdk'

  export default {
    filters: {
      meter2kilometre
    },
    data () {
      return {
        coords: {},
        form: {}
      }
    },
    computed: {
      list () {
        const list = this.$g.shopList.slice()
        return list.map(item => get_nearly(this.coords, item)).sort((a, b) => a.dist - b.dist)
      }
    },
    async created () {
      getLocation().then(coords => {
        this.location_state = true
        this.coords = coords
      }).catch(_ => {
        this.location_state = false
      })
    },
    methods: {},
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    .my-img {
        width: 88px;
    }

    .small-img {
        width: 64px;
    }
</style>
